<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css"
	href="/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
	href="/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="css/layout.css">
<link rel="icon" href="/static/ico/favicon.ico">
<style type="text/css">
.he {
	margin-top: 10px;
}

.form-group {
	margin-left: 15px;
	margin-top: 5px;
}

.imgss {
	height: 10px;
	width: 10px;
}

.imgs {
	height: 30px;
	width: 30px;
}

.desc {
	margin-left: 0;
}

#three {
	text-align: center;
}

#ima {
	height: 10%;
	width: 10%;
}
</style>
</head>
<body>

	<div class="">
		<div>
			<h3 id="three">个人信息页面</h3>
		</div>
		<div class="panel-body">
			<ul>
				<li><span th:text="${userVo?.user?.username}"></span></li>
				<li><img class="ima" style="width: 50px; height: 50px;"
					th:src="${user == null ? 
											'images/login.jpg' :
											user.icon}">
				</li>
				<li><span th:text="性别：+(${userVo?.user?.gender}==1?男:女)">工作：</span>
				</li>
				<li><span th:text="工作：+${userVo?.user?.job}">工作：</span></li>
				<li><span th:text="邮箱：+${userVo?.user?.eMail}">邮箱：</span></li>
				<li><span th:text="简介：+${userVo?.user?.introduce}">简介：</span></li>
				<li><span th:text="关注：+${userVo?.userDetail?.followNum}+人">关注</span>&nbsp&nbsp&nbsp<span
					th:text="收藏数：+${userVo?.userDetail?.collectNum}">收藏</span></li>
				<li>
					<button onclick="editUserInfo()">完善个人信息</button>
				</li>
			</ul>
		</div>
	</div>
	<div class="panel-group" id="accordion" role="tablist"
		aria-multiselectable="true">
		<div class="panel panel-default">
			<div class="panel-heading" role="tab" id="headingOne">
				<h4 class="panel-title">
					<a role="button" data-toggle="collapse" data-parent="#accordion"
						href="#collapseOne" aria-expanded="true"
						aria-controls="collapseOne"> <span
						th:text="我的状态：+${userVo?.userDetail?.articleNum}">我的状态</span>
					</a>
				</h4>
			</div>
			<div id="collapseOne" class="panel-collapse collapse in"
				role="tabpanel" aria-labelledby="headingOne">
				<!-- 面板组件开始 -->
				<div th:each="article,memberStat:${myArticles}"
					class="panel panel-default">
					<div class="panel-body">
						<div class="row">
							<!-- 左侧标题和简介 -->
							<div class="col-md-8">
								<h3 class="row1">
									<a th:text=${article?.title} href="article.html">给大家推荐几款不错的耳机</a>
								</h3>
								<!-- th:text=${s.abs} -->
								<p th:text=${article?.abstracts}>
									耳机其实是我们生活中经常使用的设备，如果你觉得太便宜的耳机质量差，太贵的又觉得没必要的话，那就可以看看我推荐给大家的这些了。
									价格没有特别贵，希望能帮助你</p>
							</div>
							<!-- 右侧图片 -->
							<div class="col-md-4">
								<img th:src="@{${article?.images}}"
									style="height: 150px; display: inline; float: right;"
									class="img-responsive img-rounded" src="images/img24.jpg">
							</div>
						</div>
					</div>
					<!-- 底部区域开始 -->
					<div class="panel-footer">
						<div class="row">
							<div class="col-md-3">
								<span th:text=${article?.createTime} class="fa fa-calendar">
									2018-10-19 11:50</span>
							</div>
							<div class="col-md-2">
								<!-- 文章游览量 -->
								<span th:text="' '+${article?.browse}" class="fa fa-eye">
									3</span>
							</div>
							<div class="col-md-2">
								<!--评论量-->
								<span th:text="' '+${article?.commentNum}"
									class="fa fa-comment-o"> 0</span>
							</div>

							<div class="col-md-3">
								<span th:each="tags,stat:${allTags}"
									th:if="${stat.index} == ${memberStat.index}"> <a
									th:each="tag : ${tags}" th:text=${tag}
									class="btn btn-info btn-xs">歌曲</a>
								</span> <a th:remove="all" class="btn btn-info btn-xs">手机</a> <a
									th:remove="all" class="btn btn-info btn-xs">耳机</a>
							</div>

							<div class="col-md-2">
								<!-- th:text="'作者：'+${s.userName}" -->
								<span th:each="username,statName:${allNames}"
									th:if="${statName.index} == ${memberStat.index}"
									th:text="'作者:'+${username}" class="pull-right">作者：admin</span>
							</div>
							<!--收藏-->
							<div>

								<!--收藏-->
								<button class="btn btn-info btn-xs"
									th:value="${article.articleId}"
									onclick="editArticles(this.value)">编辑</button>
								<!--举报-->
								<button class="btn btn-info btn-xs"
									th:value="${article.articleId}"
									onclick="delArticles(this.value)">删除</button>
							</div>
						</div>
					</div>
				</div>
				<!-- 底部区域结束 -->
				<!-- 面板组件结束 -->
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading" role="tab" id="headingTwo">
				<h4 class="panel-title">
					<a class="collapsed" role="button" data-toggle="collapse"
						data-parent="#accordion" href="#collapseTwo" aria-expanded="false"
						aria-controls="collapseTwo"> <span
						th:text="点赞：+${userVo?.userDetail?.likesNum}">点赞</span>
					</a>
				</h4>
			</div>
			<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
				aria-labelledby="headingTwo">
				<!-- 面板组件开始 -->
				<div th:each="article,memberStat:${likeArticle}"
					class="panel panel-default">
					<div class="panel-body">
						<div class="row">
							<!-- 左侧标题和简介 -->
							<div class="col-md-8">
								<h3 class="row1">
									<a th:text=${article.title} href="article.html">给大家推荐几款不错的耳机</a>
								</h3>
								<!-- th:text=${s.abs} -->
								<p th:text=${article.abstracts}>
									耳机其实是我们生活中经常使用的设备，如果你觉得太便宜的耳机质量差，太贵的又觉得没必要的话，那就可以看看我推荐给大家的这些了。
									价格没有特别贵，希望能帮助你</p>
							</div>
							<!-- 右侧图片 -->
							<div class="col-md-4">
								<img th:src="@{${article.images}}"
									style="height: 150px; display: inline; float: right;"
									class="img-responsive img-rounded" src="images/img24.jpg">
							</div>
						</div>
					</div>
					<!-- 底部区域开始 -->
					<div class="panel-footer">
						<div class="row">
							<div class="col-md-3">
								<span th:text=${article.createTime} class="fa fa-calendar">
									2018-10-19 11:50</span>
							</div>
							<div class="col-md-2">
								<!-- 文章游览量 -->
								<span th:text="' '+${article.browse}" class="fa fa-eye">
									3</span>
							</div>
							<div class="col-md-2">
								<!--评论量-->
								<span th:text="' '+${article.commentNum}"
									class="fa fa-comment-o"> 0</span>
							</div>

							<div class="col-md-3">
								<span th:each="tags,stat:${allTags}"
									th:if="${stat.index} == ${memberStat.index}"> <a
									th:each="tag : ${tags}" th:text=${tag}
									class="btn btn-info btn-xs">歌曲</a>
								</span> <a th:remove="all" class="btn btn-info btn-xs">手机</a> <a
									th:remove="all" class="btn btn-info btn-xs">耳机</a>
							</div>

							<div class="col-md-2">
								<!-- th:text="'作者：'+${s.userName}" -->
								<span th:each="username,statName:${allNames}"
									th:if="${statName.index} == ${memberStat.index}"
									th:text="'作者:'+${username}" class="pull-right">作者：admin</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 底部区域结束 -->
				<!-- 面板组件结束 -->
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading" role="tab" id="headingThree">
				<h4 class="panel-title">
					<a class="collapsed" role="button" data-toggle="collapse"
						data-parent="#accordion" href="#collapseThree"
						aria-expanded="false" aria-controls="collapseThree"> <span
						th:text="草稿：+${userVo?.userDetail?.articleDraftNum}">草稿</span>
					</a>
				</h4>
			</div>
			<div id="collapseThree" class="panel-collapse collapse"
				role="tabpanel" aria-labelledby="headingThree">
				<!-- 面板组件开始 -->
				<div th:each="article,memberStat:${draft}"
					class="panel panel-default">
					<div class="panel-body">
						<div class="row">
							<!-- 左侧标题和简介 -->
							<div class="col-md-8">
								<h3 class="row1">
									<a th:text=${article.title} href="article.html">给大家推荐几款不错的耳机</a>
								</h3>
								<!-- th:text=${s.abs} -->
								<p th:text=${article.abstracts}>
									耳机其实是我们生活中经常使用的设备，如果你觉得太便宜的耳机质量差，太贵的又觉得没必要的话，那就可以看看我推荐给大家的这些了。
									价格没有特别贵，希望能帮助你</p>
							</div>
							<!-- 右侧图片 -->
							<div class="col-md-4">
								<img th:src="@{${article.images}}"
									style="height: 150px; display: inline; float: right;"
									class="img-responsive img-rounded" src="images/img24.jpg">
							</div>
						</div>
					</div>
					<!-- 底部区域开始 -->
					<div class="panel-footer">
						<div class="row">
							<div class="col-md-3">
								<span th:text=${article.createTime} class="fa fa-calendar">
									2018-10-19 11:50</span>
							</div>
							<div class="col-md-2">
								<!-- 文章游览量 -->
								<span th:text="' '+${article.browse}" class="fa fa-eye">
									3</span>
							</div>
							<div class="col-md-2">
								<!--评论量-->
								<span th:text="' '+${article.commentNum}"
									class="fa fa-comment-o"> 0</span>
							</div>

							<div class="col-md-3">
								<span th:each="tags,stat:${allTags}"
									th:if="${stat.index} == ${memberStat.index}"> <a
									th:each="tag : ${tags}" th:text=${tag}
									class="btn btn-info btn-xs">歌曲</a>
								</span> <a th:remove="all" class="btn btn-info btn-xs">手机</a> <a
									th:remove="all" class="btn btn-info btn-xs">耳机</a>
							</div>

							<div class="col-md-2">
								<!-- th:text="'作者：'+${s.userName}" -->
								<span th:each="username,statName:${allNames}"
									th:if="${statName.index} == ${memberStat.index}"
									th:text="'作者:'+${username}" class="pull-right">作者：admin</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 底部区域结束 -->
				<!-- 面板组件结束 -->
			</div>
		</div>
</body>
<script type="text/javascript" src="/bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="/bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="/bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="/bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="/bootstrap3/js/respond.min.js"></script>
<script type="text/javascript">
	function editUserInfo() {
		window.location.href = 'edit'
	}
	function editArticles(articleId){
		console.log(articleId);
		window.location.href = '/article/update/'+articleId;
	}
	function delArticles(articleId){
		$.ajax({
		    url : "/article/delete",
		    "type" : "GET",    
		    data:{
		    	articleId:articleId
		    },
		    success : function(json) {
		    	if(json.status==200){
		    		alert("删除成功")
		    	}
		    }
		});
	}
	
</script>
</html>



